<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>PhoneHomeGroupAppManager</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all.js"></script>
</head>
<body style="padding:10px;">
<div id="north-div"></div>
<div id="center"></div>
<script type="text/javascript">
Ext.onReady(function(){
	//编码方式
	Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
	//使用表单提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
    var ds = new Ext.data.Store({//这是数据源
        proxy : new Ext.data.HttpProxy({url:'apps/list.action'}),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'id'
            },[{
                   name:'id'
               },{
                   name:'appid'
               },{
                   name:'groupid'
               },{
                   name:'appName'
               },{
                   name:'appNameEn'
               },{
                   name:'apkName'
               },{
                   name:'packageName'
               },{
                   name:'createdAt'
               },{
                   name:'className'
               },{
                   name:'iconName'
               },{
                   name:'updateAt'
               },{
                   name:'orderId'
               }])
    });

    var groupDs = new Ext.data.Store({//这是数据源
        proxy : new Ext.data.HttpProxy({url:'group/list.action'}),
        reader: new Ext.data.JsonReader({
            root:'topics',
            totalProperty: 'totalCount',
            id: 'id'
            },[{name:'id'},{name:'groupname'}])
    });
 
    var colModel = new Ext.grid.ColumnModel([//定义列
         {header:'ID',width:50,sortable:true,dataIndex:'id'},
         {header:'编号', width:88,sortable:true,dataIndex:'appid'},
         {header:'所属编组',width:88,sortable:true,dataIndex:'groupid',renderer:function(data){return data.groupname;}},
         {header:'应用名',width:150,sortable:true,dataIndex:'appName'},
         {header:'应用英文名',width:88,sortable:true,dataIndex:'appNameEn'},
         {header:'安装文',width:88,sortable:true,dataIndex:'apkName'},
         {header:'包名',width:88,sortable:true,dataIndex:'packageName'},
         {header:'类名',width:88,sortable:true,dataIndex:'className'},
         {header:'图标',width:88,sortable:true,dataIndex:'iconName'},
         {header:'排序',width:88,sortable:true,dataIndex:'orderId'},
         {header:'创建时间',width:88,sortable:true,dataIndex:'createdAt'},
         {header:'更新时间',width:88,sortable:true,dataIndex:'updateAt'},
        ]);
    var tb = new Ext.Toolbar('north-div');//创建一个工具条
   
    tb.add({
        id:'addAppsBtn',
        text: '添加',
        handler: newApp
        },{
        text: '编辑',
        handler: editApp
        },{
        text: '删除',
        handler: delApp
    });
 
    var grid = new Ext.grid.GridPanel({//列表
                border:false,
                region:'center',
                loadMask: true,
                el:'center',
                title:'条目列表',
                store: ds,
                cm: colModel,
                autoScroll: true,
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '第{0} 到 {1} 条数据 共{2}条',
                    emptyMsg: "没有数据"
                })
            });
    
    var top = new Ext.FormPanel({//这里是搜索表单
        buttonAlign:'right',
        labelWidth:70,
        region:'north',
        height:100,
        frame:true,
        title: '搜索',
        items: [{
                layout:'column',
                items:[{
                    columnWidth:.25,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '中文名',
                        id: 'sel_app_appName',
                        name: 'app.appName',
                        anchor:'90%'
                    }]
                },{
                    columnWidth:.25,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '包名',
                        id: 'sel_app_packageName',
                        name: 'app.packageName',
                        anchor:'90%'
                    }]
                },{
                	xtype:'combo',
                	fieldLabel: '所属编组',
                    id:'sel_app_groupid',
                    store:groupDs,
                    displayField:'groupname',
                    valueField:'id',
                    hiddenName:'app.groupid.id',
                    typeAhead: true,
                    forceSelection: true,
                    selectOnFocus:true,
                    mode:'remote',
                    triggerAction: 'all',
                    emptyText:'请指定所属编组...'
                }]
            }
        ],

        buttons: [{
            text: '搜索',
            handler:function(){loadList();}
        }]
    });
    
    var viewport = new Ext.Viewport({
        id:'viewport',
        layout:'border',
        items:[{
              border:false,
              region:'north',
              contentEl:'north-div',
              tbar:tb,
              height:26
            },{
                layout:"border",
                region:'center',
                border:false,
                items:[top,grid]
                }
        ]}
    );

    var loadList = function(){
	    ds.load({params:{start:0, limit:20},callback:function(r,options,success){
		    if(!success){//没取到数据时返回的success=false
		        grid.store.removeAll();//清除原有数据
		  }
	    }});
    }
    
    loadList();
        
    // 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了
    ds.on('beforeload',function(){
        Ext.apply(
        this.baseParams,
        {
            'app.appName':Ext.get('sel_app_appName').dom.value,
            'app.packageName':Ext.get('sel_app_packageName').dom.value,
            'app.groupid.id':Ext.getCmp('sel_app_groupid').getValue()
        });
    });

    var simple = new Ext.FormPanel({
        labelWidth: 75,
        frame:true,
        bodyStyle:'padding:10px 5px 0px 30px',
        width: 350,
        defaults: {width: 230,enableKeyEvents:true}, 
        defaultType: 'textfield',
        items: [{
	            fieldLabel: '编号',
	            name: 'app.appid',
	            id:'edit_app_appid',
	            allowBlank:false,
	            listeners : {
					'change':function(node,event){
			              addDialog.buttons[0].setDisabled(false);
			        }
                }
	        },{
	        	xtype:'combo',
	        	fieldLabel: '所属编组',
	            id:'edit_app_groupid',
	            store:groupDs,
	            displayField:'groupname',
	            valueField:'id',
	            hiddenName:'app.groupid.id',
	            typeAhead: true,
	            forceSelection: true,
	            selectOnFocus:true,
	            mode:'remote',
	            triggerAction: 'all',
	            emptyText:'请指定所属编组...'
	        },{
                fieldLabel: '中文名',
                name: 'app.appName',
                id:'edit_app_appName',
                allowBlank:false
            },{
                fieldLabel: '英文名',
                name: 'app.appNameEn',
                id:'edit_app_appNameEn',
                allowBlank:false
            },{
                fieldLabel: '安装文件',
                name: 'app.apkName',
                id:'edit_app_apkName',
                allowBlank:false
            },{
                fieldLabel: '包名',
                name: 'app.packageName',
                id:'edit_app_packageName',
                allowBlank:false
            },{
                fieldLabel: '类名',
                name: 'app.className',
                id:'edit_app_className',
                allowBlank:false
            },{
                fieldLabel: '图标',
                name: 'app.iconName',
                id:'edit_app_iconName',
                allowBlank:false
            },{
                fieldLabel: '排序',
                name: 'app.orderId',
                id:'edit_app_orderId',
                allowBlank:false
            },{
                xtype:'hidden',
                id:'app_id',
                name:'app.id'
            }]
    });
    
    var doClose = function(){
        addDialog.hide();
    }

    var doAdd = function(){
    	//提交到服务器操作
        simple.form.doAction('submit',{
          url:'apps/add.action',//文件路径
          method:'post',//提交方法post或get
          //提交成功的回调函数
          success:function(response,options){
        	  addDialog.hide();
        	  if(Ext.get('app_id').dom.value != null&&Ext.get('app_id').dom.value != ''){
	        	  Ext.get('app_id').dom.value = '';
	        	  Ext.Msg.alert('编辑成功','  恭喜您成功地修改了GROUPAPP信息！',function(){ds.reload();});
              }else{
	        	  Ext.Msg.alert('添加成功','  恭喜您成功地添加了新的GROUPAPP！',function(){ds.reload();});
              }
          },
          //提交失败的回调函数
          failure:function(response,options){
        	  Ext.Msg.alert('错误','请检查您的输入是否为空,如果多次确认无法成功请与系统管理员联系!！');
          }
        });
    }
    
    var addDialog;

    var initEditDialog = function(title){
        if(!addDialog){
        	addDialog = new Ext.Window({
     			layout:'fit',
     			width:400,
     			height:360,
     			closeAction:'hide',
     			plain:true,
     			buttons:[{text:'保存',disabled:true,handler:doAdd},{text:'关闭',handler:doClose}],
     			items:simple
         });
        }
        addDialog.setTitle(title);
    }
    
    function newApp() {
    	initEditDialog('新增GROUPAPP');
    	try{Ext.get('app_id').dom.value = '';}catch(e){}
        addDialog.show('addAppsBtn');
    }

    function editApp() {
        var s = grid.getSelectionModel().getSelections();
        if (s.length>1) {
            Ext.Msg.alert('出错啦','您选择了 '+s.length+' 条记录,目前只支持一次编辑一条记录！');
            return false;
        }
        if (s.length==0) {
            Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
            return false;
        }
  	    initEditDialog('编辑GROUPAPP');
  	    addDialog.show('addstaffBtn');
  	    Ext.get('edit_app_appid').dom.value = s[0].data.appid;
  	    
  	    Ext.getCmp('edit_app_groupid').setValue(s[0].data.groupid.id);
	    Ext.getCmp('edit_app_groupid').hiddenField.value = s[0].data.groupid.groupname;
	    
  	    Ext.get('edit_app_appName').dom.value = s[0].data.appName;
  	    Ext.get('edit_app_appNameEn').dom.value = s[0].data.appNameEn;
  	    Ext.get('edit_app_apkName').dom.value = s[0].data.apkName;
  	    Ext.get('edit_app_packageName').dom.value = s[0].data.packageName;
  	    Ext.get('edit_app_className').dom.value = s[0].data.className;
  	    Ext.get('edit_app_iconName').dom.value = s[0].data.iconName;
  		Ext.get('edit_app_orderId').dom.value = s[0].data.orderId;
    }

    var getIds = function(g){
    	var s = g.getSelectionModel().getSelections();
    	 if (s.length==0) {
             return false;
         }
         var ids = [];
         for(var i=0;i<s.length;i++){
             ids.push(s[i].data.id);
         }
         return ids.join(',');
    }

    var delSucc = function(result){
    	loadList();
    }
    
    function delApp() {
        var ids = getIds(grid);
        if (ids) {
            Ext.Msg.confirm('确认', '真的要删除吗？', function(btn){
                if (btn == 'yes'){
                    Ext.Ajax.request({
                       url: 'apps/del.action?ids='+ids,
                       success:delSucc
                    });
                }
            });       
        } else {
            Ext.Msg.alert('出错啦','你还没有选择要操作的记录！');
        }
    }
});
</script>
</body>
</html>